<template>
  <div>
    <!-- 顶部信息 -->
    <div class="top">
      <div class="vip" style="height:246px;width:300px">
        <img src="../assets/Index/Group 2.png" style="height:246px" />
      </div>
      <table>
        <tr>
          <td style="width:100px;backgroundColor:#f5f7fa">用户ID</td>
          <td style="width:230px">{{tableData.userID}}</td>
          <td style="width:100px;backgroundColor:#f5f7fa">职业</td>
          <td style="width:230px">{{tableData.occupation}}</td>
        </tr>
        <tr>
          <td style="backgroundColor:#f5f7fa">昵称</td>
          <td>{{tableData.nickname}}</td>
          <td style="backgroundColor:#f5f7fa">个性签名</td>
          <td>{{tableData.autograph}}</td>
        </tr>
        <tr>
          <td style="backgroundColor:#f5f7fa">性别</td>
          <td>{{tableData.gender}}</td>
          <td style="backgroundColor:#f5f7fa">用户标签</td>
          <td>{{tableData.label}}</td>
        </tr>
        <tr>
          <td style="backgroundColor:#f5f7fa">生日</td>
          <td>{{tableData.birth}}</td>
          <td style="backgroundColor:#f5f7fa">注册时间</td>
          <td>{{tableData.Regist}}</td>
        </tr>
        <tr>
          <td style="backgroundColor:#f5f7fa">城市</td>
          <td>{{tableData.city}}</td>
          <td style="backgroundColor:#f5f7fa">用户来源</td>
          <td>{{tableData.from}}</td>
        </tr>
      </table>
    </div>
    <!-- 分割线 -->
    <el-divider content-position="left">
      <span style="color:#333;fontWeight:700">统计信息</span>
    </el-divider>
    <!-- 统计信息 -->
    <el-table
      :data="tongjixinxi1"
      border
      style="width: 100%"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      >
      <el-table-column prop="shuliang" label="订单数量" width="120"></el-table-column>
      <el-table-column prop="zonge" label="订单总额" width="120"></el-table-column>
      <el-table-column prop="chengzhang" label="成长值" width="120"></el-table-column>
      <el-table-column prop="jilu" label="退款记录" width="120"></el-table-column>
      <el-table-column prop="cishu" label="登录次数" width="120"></el-table-column>
      <el-table-column prop="shichang" label="登录时长" width="120"></el-table-column>
      <el-table-column prop="youhui" label="优惠券" width="120"></el-table-column>
      <el-table-column prop="haoyou" label="好友"></el-table-column>
    </el-table>
    <el-table
      class="tongji"
      :data="tongjixinxi2"
      border
      style="width: 100%"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      >
      <el-table-column prop="xinde" label="心得数量" width="120"></el-table-column>
      <el-table-column prop="shoucang" label="收藏数量" width="120"></el-table-column>
      <el-table-column prop="dianzan" label="点赞数量" width="120"></el-table-column>
      <el-table-column prop="huozan" label="获赞数量" width="120"></el-table-column>
      <el-table-column prop="pinglun" label="评论数量" width="120"></el-table-column>
      <el-table-column prop="fensi" label="粉丝" width="120"></el-table-column>
      <el-table-column prop="guanzhu" label="关注" width="120"></el-table-column>
      <el-table-column prop="fenxiang" label="分享"></el-table-column>
    </el-table>
    <!-- 分割线 -->
    <el-divider content-position="left">
      <span style="color:#333;fontWeight:700">收货地址</span>
    </el-divider>
    <!-- 收货地址 -->
    <el-table
      class="shouhuo"
      :data="shouhuo"
      border
      style="width: 100%"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      >
      <el-table-column prop="xingming" label="姓名" width="140"></el-table-column>
      <el-table-column prop="shouji" label="手机号" width="200"></el-table-column>
      <el-table-column prop="youbian" label="邮编" width="200"></el-table-column>
      <el-table-column prop="dizhi" label="详细地址"></el-table-column>
    </el-table>
    <!-- 分割线 -->
    <el-divider content-position="left">
      <span style="color:#333;fontWeight:700">订单记录</span>
    </el-divider>
    <!-- 订单记录 -->
    <el-table
      class="dingdan"
      :data="dingdan"
      border
      style="width: 100%"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      >
      <el-table-column prop="bianhao" label="订单编号" width="150"></el-table-column>
      <el-table-column prop="shijian" label="下单时间" width="140"></el-table-column>
      <el-table-column prop="jine" label="订单金额" width="130"></el-table-column>
      <el-table-column prop="shangpin" label="下单商品" width="220"></el-table-column>
      <el-table-column prop="zhuangtai" label="订单状态" width="120"></el-table-column>
      <el-table-column prop="fangshi" label="支付方式" width="110"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分割线 -->
    <el-divider content-position="left">
      <span style="color:#333;fontWeight:700">操作日志</span>
    </el-divider>
    <!-- 操作日志 -->
    <el-table
      class="caozuo"
      :data="caozuo"
      border
      style="width: 100%"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      >
      <el-table-column prop="ip" label="IP" width="180"></el-table-column>
      <el-table-column prop="shijian" label="登录时间" width="180"></el-table-column>
      <el-table-column prop="shichang" label="登录时长(秒)" width="180">{{caozuo[0].shichang+'s'}}</el-table-column>
      <el-table-column prop="diqu" label="地区" width="180"></el-table-column>
      <el-table-column prop="fangshi" label="登录方式"></el-table-column>
    </el-table>
  </div>
</template>


<script>
export default {
  name: "",
  data() {
    return {
      tableData: {
        userID: 1864654564,
        nickname: "YaaLee",
        gender: "男",
        birth: 19971105,
        city: "北京",
        occupation: "前端",
        autograph: "无",
        label: "优质用户",
        Regist: 365,
        from: "PC端",
      },
      tongjixinxi1: [
        {
          shuliang: 1000,
          zonge: 22000,
          chengzhang: 5000,
          jilu: 5,
          cishu: 6000,
          shichang: 500,
          youhui: 20,
          haoyou: 600,
        },
      ],
      tongjixinxi2: [
        {
          xinde: 500,
          shoucang: 6832,
          dianzan: 56000,
          huozan: 65000,
          pinglun: 532,
          fensi: 30000,
          guanzhu: 300,
          fenxiang: 500,
        },
      ],
      shouhuo: [
        {
          xingming: "YaaLee",
          shouji: 13161039888,
          youbian: 100040,
          dizhi: "In your heart",
        },
      ],
      dingdan: [
        {
          bianhao: 456462489445,
          shijian: "1997-01-01",
          jine: 20000,
          shangpin: "迪奥口红10支",
          zhuangtai: "已完成",
          fangshi: "微信支付",
        },
        {
          bianhao: 456462489445,
          shijian: "1997-01-01",
          jine: 20000,
          shangpin: "迪奥口红10支",
          zhuangtai: "已完成",
          fangshi: "微信支付",
        },
        {
          bianhao: 456462489445,
          shijian: "1997-01-01",
          jine: 20000,
          shangpin: "迪奥口红10支",
          zhuangtai: "已完成",
          fangshi: "微信支付",
        },
        {
          bianhao: 456462489445,
          shijian: "1997-01-01",
          jine: 20000,
          shangpin: "迪奥口红10支",
          zhuangtai: "已完成",
          fangshi: "微信支付",
        },
        {
          bianhao: 456462489445,
          shijian: "1997-01-01",
          jine: 20000,
          shangpin: "迪奥口红10支",
          zhuangtai: "已完成",
          fangshi: "微信支付",
        },
        {
          bianhao: 456462489445,
          shijian: "1997-01-01",
          jine: 20000,
          shangpin: "迪奥口红10支",
          zhuangtai: "已完成",
          fangshi: "微信支付",
        },
      ],
      caozuo: [
        {
          ip: '19.102.6.3',
          shijian: '1998-11-12',
          shichang: 30587,
          diqu: '北京',
          fangshi: '微信',
        },
      ],
    };
  },
  computed:{
    dingdanchuli(){
      return this.shouhuo.forEach(item=>{
        return '$' + item.jine
      })
    },
  },
  methods: {
    deleteRow(){
      console.log('查看详情');
    }
  },
};
</script>

<style scoped>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #ebeef5;
  line-height: 48px;
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #606266;
}
.top {
  display: flex;
  margin-bottom: 50px;
}
.vip {
  /* border: 1px solid #ebeef5; */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tongji,
.shouhuo,
.dingdan,
.caozuo {
  margin-bottom: 50px;
}
</style>